<template>
    <div>
        <div>
            <Header></Header>
        </div>
        <div class="left">
            <div class="register-top">
                <el-tag>登录中心</el-tag>
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="right">
            <img src="../assets/register.png" width="832" height="522">
        </div>
        <div>
            <hr/>
            <Footer></Footer>
        </div>
    </div>


</template>
<script>
    import Footer from "../components/Footer";
    import Header from "../components/Header"
    import {loginApi,getUSerInfo} from "../api";

    export default {
        components: {Header, Footer},
        data() {

            return {
                activeName: 'second',
                ruleForm: {
                    name: '',
                    pass: '',
                    checkPass: ''
                },
            }
        },
        methods: {
            submitForm(formName) {
                const _this = this

                if(this.ruleForm.name == null || this.ruleForm.name === ''){
                    this.$message({
                        message: '用户名不为空',
                        type: 'error'
                    });
                    return
                }

                if(this.ruleForm.pass == null || this.ruleForm.pass === ''){
                    this.$message({
                        message: '密码不为空',
                        type: 'error'
                    });
                    return
                }

                loginApi({
                    username:this.ruleForm.name,
                    password:this.ruleForm.pass
                }).then(res => {
                    if(res.status !== 200){
                        this.$message({
                            type: 'success',
                            message: '登录失败',
                            duration:500
                        });
                        return
                    }
                    this.$message({
                        type: 'success',
                        message: '登录成功',
                        duration:500
                    });
                    _this.$store.commit("SET_TOKEN", res.data.token)

                    let userInfo;
                    getUSerInfo({
                        token:res.data.token
                    }).then(res => {
                        userInfo = {}
                        res = res.data
                        userInfo.name = res.realname
                        userInfo.id = res.id
                        _this.$store.commit("SET_USER_INFO",userInfo)
                        _this.$router.push({
                            name:'Index',
                            query:{
                                msg:"loginSuccess",
                                user: userInfo
                            }
                        })
                    })
                })

            },
        }
    };
</script>
<style>
    .el-tag.el-tag--light {
        width: 10vw;
        margin-left: 8vw;
        margin-bottom: 2vw;
    }
</style>
<style scoped>
    .left{
        float: left;
        width: 40%;
        height: 500px;
        margin-left: 0;

    }
    .register-top{
        margin-top: 10vh;
        width: 25vw;
        height: 65vh;
        margin-left: 50px;
    }
    .right{
        float: right;
        width: 60%;
        height: 500px;
    }
</style>
